<template>
    <div>
        <Row :gutter="24" type="flex" justify="end">
            <!--<Col :xs="7" :lg="11">-->
            <!--<Button type="success" icon="plus" @click="addBtn()">添加</Button>-->
            <!--</Col>-->
            <Col :xs="8" :lg="4" class="hidden-mobile">
                <Input icon="search" placeholder="按 手机号/昵称 搜索" clearable v-model="searchForm.keyword"/>
            </Col>
            <Col :xs="5" :lg="4">
                <DatePicker :value="searchForm.first_at" @on-change="handleFirstChange" format="yyyy-MM-dd"
                            type="daterange" placement="bottom-end" placeholder="选择访问日期"
                            style="width: 100%;"></DatePicker>
            </Col>
            <Col :xs="5" :lg="4">
                <DatePicker :value="searchForm.filed_at" @on-change="handleFiledChange" format="yyyy-MM-dd"
                            type="daterange" placement="bottom-end" placeholder="选择注册时间"
                            style="width: 100%;"></DatePicker>
            </Col>
            <Col :xs="4" :lg="3">
                <Select v-model="searchForm.status" placeholder="选择状态">
                    <Option value="">全部</Option>
                    <Option v-for="item in tableStatus.status" :value="item.id">{{ item.label }}</Option>
                </Select>
            </Col>

            <Col :xs="3" :lg="2">
                <Button type="primary" icon="ios-search" @click="getTableDataExcute(feeds.current_page)">搜索</Button>
            </Col>
            <Col :xs="3" :lg="2">
                <Button icon="md-refresh" @click="reset">重置</Button>
            </Col>
        </Row>
        <br>

        <Row>
            <div class="demo-spin-container" v-if="tableLoading">
                <Spin fix>
                    <Icon type="load-c" size=18 class="spin-icon-load"></Icon>
                    <div>加载中...</div>
                </Spin>
            </div>
            <Table border :columns="columns" :data="feeds.data" @on-sort-change='onSortChange'></Table>
            <div style="margin: 10px;overflow: hidden">
                <div style="float: right;">
                    <Page :total="feeds.total" :current="feeds.current_page" :page-size="feeds.per_page" class="paging"
                          show-elevator show-total show-sizer @on-change="handleOnPageChange"
                          @on-page-size-change='onPageSizeChange'></Page>
                </div>
            </div>
        </Row>

        <Modal v-model="modalHeadImage.show">
            <p slot="header">图片预览</p>
            <div class="text-center">
                <img :src="modalHeadImage.url" alt="" v-if="modalHeadImage.show" class="center-align"
                     style="width:100%">
            </div>
            <div slot="footer">
            </div>
        </Modal>

    </div>
</template>


<script>

  import {destroy, getTableData } from '@/api/user'

  import {getTableStatus, switchEnable} from '@/api/common'

  export default {
    data() {
      return {
        searchForm: {
          order_by: 'created_at,desc',
          first_at: [],
          filed_at: [],
          status: ''
        },
        tableLoading: false,
        tableStatus: {
          enable: [],
          is_admin: [],
          status: [
            {label: '已注册', id: 1},
            {label: '未注册', id: 2},
          ]
        },
        feeds: {
          data: [],
          total: 0,
          current_page: 1,
          per_page: 10
        },
        modalHeadImage: {
          show: false,
          url: null
        },
        // roleModal: {
        //   id: 0,
        //   allRoles: [],
        //   hasRoles: [],
        //   show: false,
        //   saveLoading: false,
        //   listStyle: {
        //     width: '250px',
        //     height: '300px'
        //   }
        // },
        // addModal: {
        //   show: false
        // },
        // editModal: {
        //   show: false,
        //   id: 0
        // },
        columns: [
          {title: 'ID', key: 'id', sortable: 'customer', minWidth: 80, align: 'center'},
          {title: '手机号', key: 'phone', minWidth: 120,},
          {title: '昵称', key: 'name', minWidth: 120,},
          {
            title: '头像',
            key: '',
            minWidth: 80,
            render: (h, params) => {
              let t = this
              return h('div', [
                h('img', {
                  attrs: {
                    src: params.row.weixin_head_image_path == '' ? params.row.head_image.url : params.row.weixin_head_image_path,
                    'data-fancybox': '12312'
                  },
                  class: 'head_image',
                  style: {
                    width: '40px',
                    height: '40px'
                  },
                  on: {
                    click: (value) => {
                      t.modalHeadImage.show = true
                      t.modalHeadImage.url = params.row.weixin_head_image_path == '' ? params.row.head_image.url : params.row.weixin_head_image_path
                    }
                  }
                }),
              ])
            }
          },
          {title: '微信ID', key: 'weixin_openid', minWidth: 150,},
          {title: '现金抵扣券', key: 'coupon', minWidth: 100,},
          {title: '领券时间', key: 'coupon_at', minWidth: 150,},
          {
            title: '是否使用',
            minWidth: 100,
            render: (h, params) => {
              const color = params.row.coupon_use == '1' ? 'green' : 'default'
              const text = params.row.coupon_use == '1' ? '已使用' : '未使用'

              return h('div', [
                h('Tag', {
                  props: {
                    color: color
                  }
                }, text)
              ])
            }
          },

          // {
          //   title: '后台权限',
          //   minWidth: 150,
          //   render: (h, params) => {
          //
          //     const row = params.row
          //     const color = row.is_admin === 'T' ? 'green' : 'red'
          //     const text = row.is_admin === 'T' ? '可登录' : '不可登录'
          //
          //     return h('div', [
          //       h('Tag', {
          //         props: {
          //           color: color
          //         }
          //       }, text)
          //     ])
          //   }
          // },
          // {
          //   title: '启用状态',
          //   key: 'enable',
          //   minWidth: 90,
          //   render: (h, params) => {
          //     return h('i-switch', {
          //       props: {
          //         slot: 'open',
          //         type: 'primary',
          //         value: params.row.enable === 'T', //控制开关的打开或关闭状态，官网文档属性是value
          //       },
          //       on: {
          //         'on-change': (value) => {
          //           this.switchEnableExcute(params.index)
          //         }
          //       }
          //     })
          //   }
          // },
          {
            title: '访问日期',
            key: 'last_login_at',
            sortable: 'customer',
            minWidth: 150,
          },
          {
            title: '注册时间',
            key: 'created_at',
            minWidth: 150,
          },
          {
            title: '注册状态',
            minWidth: 100,
            render: (h, params) => {

              const color = params.row.phone !== '' ? 'green' : 'default'
              const text = params.row.phone !== '' ? '已注册' : '未注册'

              return h('div', [
                h('Tag', {
                  props: {
                    color: color
                  }
                }, text)
              ])
            }
          },
          // {
          //   title: '操作',
          //   key: '',
          //   align: 'center',
          //   fixed: 'right',
          //   minWidth: 88,
          //   render: (h, params) => {
          //     let t = this
          //     return h('div', [
          //       h('Button', {
          //         props: {
          //           type: 'primary',
          //           size: 'small'
          //         },
          //         style: {
          //           marginRight: '5px'
          //         },
          //         on: {
          //           click: () => {
          //             this.editModal.show = true
          //             this.editModal.id = params.row.id
          //           }
          //         }
          //
          //       }, '修改')
          //     ])
          //   }
          // }
        ],

      }
    },
    created() {
      let t = this
      t.getTableStatusExcute('users')
      t.getTableDataExcute(t.feeds.current_page)
    },
    methods: {
      handleOnPageChange: function (to_page) {
        this.getTableDataExcute(to_page)
      },
      onPageSizeChange: function (per_page) {
        this.feeds.per_page = per_page
        this.getTableDataExcute(this.feeds.current_page)
      },
      getTableStatusExcute(params) {
        let t = this
        getTableStatus(params).then(res => {
          t.tableStatus.enable = res.data.enable
          t.tableStatus.is_admin = res.data.is_admin
        })
      },
      getTableDataExcute(to_page) {
        let t = this
        t.tableLoading = true
        t.feeds.current_page = to_page
        getTableData(to_page, t.feeds.per_page, t.searchForm).then(res => {
          t.feeds.data = res.data
          t.feeds.total = res.meta.total
          t.tableLoading = false
        }, function (error) {
          t.tableLoading = false
        })
      },
      onSortChange: function (data) {
        const order = data.column.key + ',' + data.order
        this.searchForm.order_by = order
        this.getTableDataExcute(this.feeds.current_page)
      },
      // switchEnableExcute(index) {
      //   let t = this
      //   let new_status = 'T'
      //   if (t.feeds.data[index].enable === 'T') {
      //     new_status = 'F'
      //   }
      //   switchEnable(t.feeds.data[index].id, 'users', new_status).then(res => {
      //     t.feeds.data[index].enable = new_status
      //     t.$Notice.success({
      //       title: res.message
      //     })
      //   })
      // },
      // getAllRoleExcute() {
      //   let t = this
      //   getAllRole().then(res => {
      //     t.roleModal.allRoles = res.data
      //   })
      // },
      // handleTransferChange(newTargetKeys) {
      //   this.roleModal.hasRoles = newTargetKeys
      // },
      // getUserRolesExcute(id) {
      //   getUserRoles(id).then(res => {
      //     this.roleModal.hasRoles = res.data
      //   })
      // },
      // renderFormat(item) {
      //   return item.label + '「' + item.description + '」'
      // },
      // giveUserRoleExcute() {
      //   let t = this
      //   giveUserRole(t.roleModal.id, t.roleModal.hasRoles).then((res) => {
      //     t.$Notice.success({
      //       title: '操作成功',
      //       desc: res.message
      //     })
      //     t.roleModal.show = false
      //   })
      // },
      // cancelRoleModal() {
      //   let t = this
      //   t.roleModal.show = false
      //   t.roleModal.saveLoading = false
      // },
      // destroyExcute(id, key) {
      //   let t = this
      //   destroy(id).then(res => {
      //     t.feeds.data.splice(key, 1)
      //     t.$Notice.success({
      //       title: res.message
      //     })
      //   })
      // },
      // addBtn() {
      //   this.addModal.show = true
      // },
      // addModalHide() {
      //   this.addModal.show = false
      // },
      // editModalHide() {
      //   this.editModal.show = false
      // },
      handleFirstChange(val) {
        this.searchForm.first_at = val
      },
      handleFiledChange(val) {
        this.searchForm.filed_at = val
      },

      // 重置
      reset() {
        let t = this
        t.searchForm=  {
            order_by: 'created_at,desc',
            first_at: [],
            filed_at: [],
            status: ''
        },
        t.getTableDataExcute()
      }
    },
  }
</script>
